<template>
  <el-dialog v-model="deleteVisible" width="50%" align-center class="Vdialog" @close="cancel">
    <template #header>
      <h4 class="dialogName">角色管理</h4>
    </template>
    <div class="content">
      <div class="mb15">分类：{{ roletitle }}</div>
      <div class="box">
        <p class="mb5">拥有该分类的角色：</p>
        <el-input class="search mb5" v-model="roleName" size="large" placeholder="角色名称" prefix-icon="Search" />
        <el-tag v-for="item in items" :key="item.id" :type="roleData.includes(item.id) ? '' : 'info'" class="mx-1 cursor"
          :effect="roleData.includes(item.id) ? 'light' : 'plain'" size="large" round @click="selectRole(item.id)">
          {{ item.name }}
        </el-tag>
      </div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm" :loading="loading.save">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="VRole">
import { reactive, ref, toRefs, watch } from 'vue'
import { roleList } from '@/api/system/role'
const emits = defineEmits(['cancel', 'confirm']);
// 声明接收参数
const props = defineProps({
  content: {
    type: String,
    default: ''
  },
  roleData: {
    type: Array,
    default: []
  },
  roletitle: ''
})
const data = reactive({
  deleteVisible: false,
  loading: {},
  input: '',
  items: [
    { type: '', label: '通用' },
    { type: 'info', label: '研发' },
    { type: 'info', label: '超级管理员' },
    { type: 'info', label: 'AM运营' },
    { type: 'info', label: 'AM运营主管' },
  ],
  roleName: ''
})
const { deleteVisible, loading, items, roleName } = toRefs(data)
const { content, roleData, roletitle } = toRefs(props)
const roleListF = () => {
  roleList({ pageNum: 1, pageSize: 1000 }).then(res => {
    items.value = res.data
  })
}
roleListF()
//选择角色
const selectRole = (id) => {
  if (roleData.value.includes(id)) {
    const index = roleData.value.findIndex((e) => {
      return e === id;
    });
    roleData.value.splice(index, 1)
  } else {
    roleData.value.push(id)
  }
}
const open = () => {
  deleteVisible.value = true
}
const confirm = () => {
  loading.value.save = true
  emits('confirm')
}
const cancel = () => {
  deleteVisible.value = false
  loading.value.save = false
  emits('cancel')
}
defineExpose({
  open, data, cancel
})
</script>
<style lang="scss" scoped>
.cursor {
  cursor: pointer;
}

.mb15 {
  margin-bottom: 15px;
}

.mb5 {
  margin-bottom: 5px;
}

.content {
  align-items: center;
  margin: 20px;

  .box {
    border: 1px solid #f4f7ff;
    padding: 10px;
  }

  .search {
    box-sizing: content-box;
    border: none;

    &:deep(.el-input__wrapper) {
      padding: 1px 15px;
      box-shadow: none;
      background-color: #fafafa;
    }
  }
}

.dialogName {
  font-size: 16px;
  font-weight: bold;
}
</style>